<template>

    <div class="pic_grid app_width">
        <div v-for="(item,index) of goodsinfos"

             :key="index">
            <div class="icon-item">
                <router-link :to="'/goodsinfoDetail?id='+item.goodsinfoid">
                    <div :style="{backgroundImage: `url(${BASE_API+item.image})`}" class="pan-thumb"></div>
                    <span>{{ item.goodsinfoname }}</span>
                </router-link>
            </div>

        </div>
    </div>

</template>


<script name="goodsinfo" setup>
import {useRoute, useRouter} from "vue-router";

const route = useRoute();   //获取路由中的信息或参数
const router = useRouter();   //操作路由,跳转之类的
import {ElMessage, ElMessageBox} from "element-plus";  //提示框和消息


import axios_request from '../util/axios_request.js'
import {onMounted, ref, watch} from "vue";


const goodsinfos = ref(null)//这里写注释
const BASE_API = ref('http://localhost:8081/');


onMounted(() => {
    getList()
})


watch(() => route, newdata => {
    // 如果路由参数有变化，会再次执行获取列表数据
    getList()
}, {deep: true})


function getList() {


    //分类检索
    // 列表页 //审核过的
    axios_request.get('/web/goodsinfo.action', {
        params: null
    }).then(response => {
        goodsinfos.value = null
        goodsinfos.value = response.data

    })

}
//当前页输入框
function handleCurrentChange(val) {
    listQuery.value.pageNumber = val
    getList()
}
</script>


<style rel="stylesheet/scss" lang="scss" scoped>

</style>
